<template>
    <div>
        <div v-if="dataSourceList.length > 0">
            <a-table :dataSource="dataSource" :pagination="false" bordered>
                <a-table-column key="productId" title="商品id" data-index="productId" />
                <a-table-column key="productName" title="商品名称" data-index="productName" />
                <a-table-column key="productNumber" title="商品现有数量" data-index="productNumber" />
                <a-table-column key="productClassificationId" title="分类" data-index="productClassificationId" />
                <a-table-column key="productStash" title="分布仓库" data-index="productStash" />
                <a-table-column key="productTime" title="修改时间" data-index="productTime" />
                <a-table-column title="操作">
                    <template #default="{ record }">
                        <!-- <template #default> -->
                        <a-button type="text" @click="OutStorage(record.productId)">出库</a-button>
                        <a-button type="text" @click="ProductUpdateClassification(record)">修改商品分类</a-button>
                        <a-button type="text" @click="ProductDetils(record.productId)">查询详情</a-button>
                    </template>
                </a-table-column>
            </a-table>
            <div style="width:100%;text-align:center;margin:30px;paddint:30px;">
                <a-pagination v-model:current="page.pageIndex" v-model:pageSize="page.pageSize" :total="total"
                    show-less-items @change="PageChange" />
            </div>
        </div>
        <div v-else>
            <a-empty description="暂无数据">
            </a-empty>
        </div>


        <!-- 弹窗 -->
        <div>
            <div class="AddStash">
                <a-modal v-model:visible="visible" cancelText="取消" okText="提交" title="修改商品分类" @cancel="cancelEdit"
                    @ok="OKEdit">
                    <div class="EditBox">
                        <a-form :model="UpdateClassification">
                            <a-form-item label="商品名称">
                                <span>{{ UpdateClassification.stashName }}</span>
                            </a-form-item>
                            <a-form-item label="商品当前分类">
                                <span>{{ UpdateClassification.productClassificationIdOK }}</span>
                            </a-form-item>
                            <a-form-item name="storageClassificationId" label="商 品 分 类 ">
                                <a-select ref="select" v-model:value="UpdateClassification.productClassificationId"
                                    allowClear>
                                    <a-select-option v-for="(item, index) in List" :value="item.classificationId"
                                        :key="index">{{
                                            item.classificationName }}</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-form>
                    </div>
                </a-modal>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"
import { ProductSelectLimit, ClassificationSelectAll, productUpdateClassification } from "../../Axios/General"
// import { StashSelectAll } from "../../Axios/Admin"
import { DeepCopy } from "../../utils/Copy"
import { Time } from "../../utils/Time"
import { useRouter } from "vue-router"
import { message } from "ant-design-vue"
const router = useRouter()

const dataSource = ref([{
    productId: 0,
    productStash: "",
    productTime: ""
}])
const List = ref([{ classificationId: 0, classificationName: "" }])
const UpdateClassification = ref({
    productClassificationId: 1,
    productId: "",
    productClassificationIdOK: "",
    stashName: ""
})
const visible = ref(false)
const total = ref(0)
const dataSourceList = ref([])
const page = ref({
    pageIndex: 1,
    pageSize: 10,

})
onMounted(async () => {
    await init()
})
const ProductDetils = (num) => {
    router.push({
        name: "productDetils",
        query: {
            id: num
        }
    })
}

const OutStorage = (num) => {
    router.push({
        name: "Storage",
        query: {
            id: num
        }
    })
}
const ProductUpdateClassification = async (list) => {
    visible.value = true
    UpdateClassification.value.productId = list.productId
    UpdateClassification.value.stashName = list.productName
    UpdateClassification.value.productClassificationIdOK = list.productClassificationId
    await ListInit()

}
const cancelEdit = () => {
    visible.value = false
    UpdateClassification.value = {
        productClassificationId: 1,
        productId: "",
        productClassificationIdOK: "",
        stashName: ""
    }

}

const OKEdit = async () => {

    if (UpdateClassification.value.productClassificationId != null) {
        const res = await productUpdateClassification(UpdateClassification)
        if (res.code == 200) {
            await init()
            UpdateClassification.value = {
                productClassificationId: 1,
                productId: "",
                productClassificationIdOK: "",
                stashName: ""
            }
            visible.value = false
        }

    } else {
        message.warning("请选择新分类之后提交")
    }

}
const PageChange = async (pages) => {
    page.value.pageIndex = pages
    await init()
}
const init = async () => {
    const res = await ProductSelectLimit(page)
    if (res.code == 200) {
        if (res.data.Date.length > 0) {
            dataSource.value = DeepCopy(res.data.Date)
            dataSourceList.value = DeepCopy(res.data.Date)
            total.value = res.data.Total
            dataSource.value.forEach((el, index) => {
                el.productTime = Time(new Date(el.productTime))
                const date = JSON.parse(dataSource.value[index].productStash)
                if (date.length >= 2) {
                    el.productStash = ""
                    date.forEach((el2, index) => {
                        el.productStash += index != date.length - 1 ? `${el2.stashName}，` : el2.stashName
                    })
                } else {
                    el.productStash = date[0].stashName
                }



            })

        }
    }
}

const ListInit = async () => {
    const res = await ClassificationSelectAll()
    console.log(res);

    List.value = res.data

    console.log(List.value[0].classificationName);

}
</script>

<style scoped lang="scss">
.Echarts {
    height: 200px;
    width: 400px;
}
</style>